<template>
	<gui-page style="background-color: white;" :customHeader="true" :headerClass="['gui-bg-white']" ref="guiPage"
		:fullPage="true">
		<!-- 自定义头部导航 -->
		<template v-slot:gHeader>
			<view style="height:44px;" class="gui-flex gui-nowrap gui-rows gui-align-items-center">
				<!-- 使用组件实现返回按钮及返回首页按钮 -->
				<gui-header-leading :home="false" :back="true"></gui-header-leading>
				<!-- 导航文本此处也可以是其他自定义内容 -->
				<view style="width:44rpx;"></view>
				<text class="gui-flex1 gui-text-center gui-ellipsis">签名</text>
				<!-- 此处加一个右侧展位元素与左侧同宽，实现标题居中 -->
				<!-- 实际宽度请根据自己情况设置 -->
				<view style="width:120rpx;"></view>
				<!-- 如果右侧有其他内容可以利用条件编译和定位来实现-->
			</view>
		</template>

		<template v-slot:gBody>
			<view class="" style="">

				<view class="gui-padding">
					<up-steps :current="currentStep" >
						<up-steps-item title="维修工签字" desc="" style="background-color: red;">
						</up-steps-item>
						<up-steps-item title="驾驶员签字" desc=""></up-steps-item>
					</up-steps>
					<view class="" v-show="currentStep==0">
						<view class="gui-margin-top">
							<text class="gui-h6">维修工</text>
						</view>
						<view class="gui-border gui-margin-top"
							:style="{height:canvas1.height+'rpx', overflow:'hidden'}">
							<canvas  id="graceSign1" canvas-id="graceSign1" @touchstart="tstart1" @touchmove="tmove1"
								:style="{width:canvas1.width+'rpx', height:canvas1.height+'rpx'}"></canvas>
						</view>
						<view class="gui-margin-top gui-flex gui-rows gui-space-between" v-if="!isNew1">
							<text class="sign-btn gui-text gui-color-gray gui-block" @tap="canvasInit1">重新签名</text>
							<text class="sign-btn gui-text gui-primary-color gui-block" @tap="saveImg1">确定</text>
						</view>

						<form @submit="submit1">
							<view class="gui-bg-white" style="padding:16rpx;">
							</view>
							<view class="gui-flex gui-row gui-nowrap gui-space-between gui-align-items-center"
								style="margin-top:20rpx;">
								<view></view>
								<view>
									<gui-submit-button ref="guibtn1">
										<template v-slot:default>
											<text style="line-height:80rpx;"
												class="gui-block gui-sbutton-text gui-icons">&#xe6b8;
												上传</text>
										</template>
										<template v-slot:realBtn>
											<button style="width:230rpx; height:80rpx;" type="default"
												form-type="submit">上传</button>
										</template>
										<template v-slot:success>
											<text style="line-height:80rpx;"
												class="gui-block gui-sbutton-text gui-icons">&#xe7f8;
												上传成功</text>
										</template>
										<template v-slot:error>
											<text style="line-height:80rpx;"
												class="gui-block gui-sbutton-text gui-icons">&#xe646;
												上传失败</text>
										</template>
									</gui-submit-button>
								</view>
							</view>
						</form>
					</view>
					<view class="" v-show="currentStep==1">
						<view class="gui-margin-top">
							<text class="gui-h6 gui-color-gray">驾驶员</text>
						</view>
						<view class="gui-margin-top gui-bg-white gui-dark-bg-level-3"
							:style="{height:canvas2.height+'rpx', overflow:'hidden'}">
							<canvas id="graceSign2" canvas-id="graceSign2" @touchstart="tstart2" @touchmove="tmove2"
								:style="{width:canvas2.width+'rpx', height:canvas2.height+'rpx'}"></canvas>
						</view>
						<view class="gui-margin-top gui-flex gui-rows gui-space-between" v-if="!isNew2">
							<text class="sign-btn gui-text gui-color-gray gui-block" @tap="canvasInit2">重新签名</text>
							<text class="sign-btn gui-text gui-primary-color gui-block" @tap="saveImg2">确定</text>
						</view>

						<form @submit="submit2">
							
							<view class="gui-flex gui-row gui-nowrap gui-space-between gui-align-items-center"
								style="margin-top:20rpx;">
								<view></view>
								<view>
									<gui-submit-button ref="guibtn2">
										<template v-slot:default>
											<text style="line-height:80rpx;"
												class="gui-block gui-sbutton-text gui-icons">&#xe6b8;
												上传</text>
										</template>
										<template v-slot:realBtn>
											<button style="width:230rpx; height:80rpx;" type="default"
												form-type="submit">上传</button>
										</template>
										<template v-slot:success>
											<text style="line-height:80rpx;"
												class="gui-block gui-sbutton-text gui-icons">&#xe7f8;
												上传成功</text>
										</template>
										<template v-slot:error>
											<text style="line-height:80rpx;"
												class="gui-block gui-sbutton-text gui-icons">&#xe646;
												上传失败</text>
										</template>
									</gui-submit-button>
								</view>
							</view>
						</form>
					</view>
					<view class="gui-margin-top">
						<button :plain="true" type="default" style="border-radius:80rpx;" v-if="currentStep==1" @tap="prevStep"
							class="gui-button ">
							<text class="gui-color-blue gui-button-text">上一步</text>
						</button>
						<view class="" style="height:20rpx;">

						</view>
						<button type="default" style="border-radius:80rpx;" v-if="currentStep==0" @tap="nextStep"
							class="gui-button  gui-bg-orange1 gui-noborder">
							<text class="gui-color-white gui-button-text">下一步</text>
						</button>
						
						<button type="default" style="border-radius:80rpx;" v-if="currentStep==1" @tap="submitAll"
							class="gui-button  gui-bg-orange1 gui-noborder">
							<text class="gui-color-white gui-button-text">提交</text>
						</button>
						
					</view>

				</view>
			</view>
			<view class="bottom-phone">

			</view>
		</template>
	</gui-page>
</template>

<script>
	import useTicket from "@/api/ticket"
	import request from '@/utils/request'
	const {sign}  = useTicket()
	export default {
		data() {
			return {
				id:null,
				currentStep: 0,
				canvas1: {
					width: 690, // 画布宽度，单位 rpx
					height: 380, // 画布高度, 单位 rpx
					bgColor: '#ffe7ba', // 画布演示
					textColor: '#000000', // 画笔颜色
					widthIn: 300, // 自动计算转换为 px
					heightIn: 300, // 自动计算转换为 px
					size: 3, // 画笔粗细
				},
				canvas2: {
					width: 690, // 画布宽度，单位 rpx
					height: 380, // 画布高度, 单位 rpx
					bgColor: '#ffe7ba', // 画布演示
					textColor: '#000000', // 画笔颜色
					widthIn: 300, // 自动计算转换为 px
					heightIn: 300, // 自动计算转换为 px
					size: 3, // 画笔粗细
				},
				ctx1: null, // 画布对象,
				ctx2: null, // 画布对象,
				drawTimer1: null, // 演示存储计算器,
				drawTimer2: null, // 演示存储计算器,
				isNew1: true, // 画布是否是空白的
				isNew2: true, // 画布是否是空白的
				formData1: {
					url: ''
				},
				formData2: {
					url: ''
				},
				file1:null,
				file2:null,
			}
		},
		onLoad(option) {
			this.id = +(option.id)
		},
		mounted: function() {
			this.canvasInit1();
		},
		methods: {
			nextStep() {
				if(this.formData1.url==""){
					return uni.showToast({
						icon:"none",
						title:"前完成签字并上传"
					})
				}
				this.currentStep = this.currentStep + 1;
				this.canvasInit2();
			},
			prevStep() {
				this.currentStep = this.currentStep - 1;
			},
			canvasInit1: function() {
				this.$refs.guibtn1.reset();
				setTimeout(() => {
					this.ctx1 = uni.createCanvasContext('graceSign1');
					this.canvas1.widthIn = uni.upx2px(this.canvas1.width);
					this.canvas1.heightIn = uni.upx2px(this.canvas1.height);
					this.ctx1.setFillStyle(this.canvas1.bgColor);
					this.ctx1.fillRect(0, 0, this.canvas1.widthIn, this.canvas1.heightIn);
					this.ctx1.draw(true);
					this.ctx1.setStrokeStyle(this.canvas1.textColor);
					this.ctx1.setLineWidth(this.canvas1.size);
					this.isNew1 = true;
				}, 300);
			},
			canvasInit2: function() {
				this.$refs.guibtn2.reset();
				setTimeout(() => {
					this.ctx2 = uni.createCanvasContext('graceSign2');
					this.canvas2.widthIn = uni.upx2px(this.canvas2.width);
					this.canvas2.heightIn = uni.upx2px(this.canvas2.height);
					this.ctx2.setFillStyle(this.canvas2.bgColor);
					this.ctx2.fillRect(0, 0, this.canvas2.widthIn, this.canvas2.heightIn);
					this.ctx2.draw(true);
					this.ctx2.setStrokeStyle(this.canvas2.textColor);
					this.ctx2.setLineWidth(this.canvas2.size);
					this.isNew2 = true;
				}, 300);
			},
			tstart1: function(e) {
				var x = e.touches[0].x;
				var y = e.touches[0].y;
				this.ctx1.moveTo(x, y);
				this.isNew1 = false;
			},
			tmove1: function(e) {
				var x = e.touches[0].x;
				var y = e.touches[0].y;
				this.ctx1.lineTo(x, y);
				this.ctx1.stroke();
				this.ctx1.draw(true, this.saveImg1);
				this.ctx1.moveTo(x, y);
			},
			tstart2: function(e) {
				var x = e.touches[0].x;
				var y = e.touches[0].y;
				this.ctx2.moveTo(x, y);
				this.isNew2 = false;
			},
			tmove2: function(e) {
				var x = e.touches[0].x;
				var y = e.touches[0].y;
				this.ctx2.lineTo(x, y);
				this.ctx2.stroke();
				this.ctx2.draw(true, this.saveImg2);
				this.ctx2.moveTo(x, y);
			},
			// 手写完毕后自动生成一个临时图片文件
			// 您可以利用临时图片完成后续的上传等工作
			saveImg1: function() {
				if (this.drawTimer1 != null) {
					clearTimeout(this.drawTimer1);
				}
				this.drawTimer1 = setTimeout(() => {
					uni.canvasToTempFilePath({
						x: 0,
						y: 0,
						width: this.widthIn,
						height: this.heightIn,
						destWidth: this.widthIn,
						destHeight: this.heightIn,
						canvasId: 'graceSign1',
						success: (res) => {
							// 在H5平台下，tempFilePath 为 base64
							console.log(res.tempFilePath);
							this.file1=res.tempFilePath
						}
					});
				}, 200);
			},
			saveImg2: function() {
				if (this.drawTimer2 != null) {
					clearTimeout(this.drawTimer2);
				}
				this.drawTimer2 = setTimeout(() => {
					uni.canvasToTempFilePath({
						x: 0,
						y: 0,
						width: this.widthIn,
						height: this.heightIn,
						destWidth: this.widthIn,
						destHeight: this.heightIn,
						canvasId: 'graceSign2',
						success: (res) => {
							// 在H5平台下，tempFilePath 为 base64
							console.log(res.tempFilePath);
							this.file2=res.tempFilePath
						}
					});
				}, 200);
			},
			uploadFinger() {

			},
			submit1:  function(e) {
				
				// 检查按钮状态 按钮状态不为 1 阻止重复提交
				var btnStatus = this.$refs.guibtn1.status;
				if (btnStatus != 1) {
					return;
				}
				if(this.file1==null){
					return this.$refs.guibtn1.fail()
				}
				this.$refs.guibtn1.loading();
				setTimeout(async()=>{
					// 提交
					const data = await request.upload(`${uni.$host}/api/mini/upload`,this.file1)
					this.formData1.url=data.data
					
					this.$refs.guibtn1.success();
				},1500)
			},
			submit2: function(e) {
				// 检查按钮状态 按钮状态不为 1 阻止重复提交
				var btnStatus = this.$refs.guibtn2.status;
				if (btnStatus != 1) {
					return;
				}
				if(this.file2==null){
					return this.$refs.guibtn2.fail()
				}
				this.$refs.guibtn2.loading();
				// 提交
				setTimeout(async()=>{
					const data = await request.upload(`${uni.$host}/api/mini/upload`,this.file2)
					this.formData2.url=data.data
					this.$refs.guibtn2.success();
				},1500)
				
			},
			async submitAll(){
				if(this.formData1.url==""||this.formData2.url==""){
					return uni.showToast({
						icon:"none",
						title:"尚未完成签字"
					})
				}
				let obj = {
					id:this.id,
					customer_sign:this.formData1.url,
					user_sign:this.formData2.url
				}
				await sign(obj)
				setTimeout(()=>{
					uni.switchTab({
						url:`/pages/ticket/index`
					})
				},1500)
			}


		}
	}
</script>

<style lang="scss" scoped>
	.sign-btn {
		width: 250rpx;
		margin: 25rx;
		line-height: 80rpx;
		text-align: center;
	}
</style>